<template>
  <div class="player-detail">
    <van-nav-bar left-arrow @click-left="goBack" />
    <div class="player-vinyl">
      <div class="vinyl-wrapper">
        <img class="vinyl-img" :class="{ playing: isPlaying }" src="https://img1.baidu.com/it/u=217640386,4090999872&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="vinyl" />
        <img class="album-img" :src="currentSong.cover" alt="album" />
      </div>
    </div>
    <div class="song-info">
      <div class="song-title">{{ currentSong.name }}</div>
      <div class="song-artist">{{ currentSong.artist }}</div>
      <div class="song-tags">
        <van-tag type="primary">VIP</van-tag>
        <van-tag type="success">标准</van-tag>
        <van-tag type="danger">580w+</van-tag>
      </div>
      <div class="song-desc">走不出 看不破</div>
    </div>
    <div class="player-controls">
      <van-icon name="bell" />
      <van-icon name="volume-o" />
      <van-icon name="down" />
      <van-icon name="chat-o" />
    </div>
    <div class="player-progress">
      <span>{{ formatTime(currentTime) }}</span>
      <van-slider 
        v-model="progress" 
        :max="100" 
        bar-height="3px" 
        active-color="#fff" 
        inactive-color="#888" 
        @change="onSliderChange"
        :disabled="isLoading"
      />
      <span>{{ formatTime(duration) }}</span>
    </div>
    <div class="player-actions">
      <van-icon name="replay" />
      <van-icon name="arrow-left" />
      <van-icon 
        :name="isLoading ? 'loading' : (isPlaying ? 'pause-circle' : 'play-circle')" 
        size="48" 
        color="#fff" 
        @click="playStatus"
        :class="{ 'loading-icon': isLoading }"
      />
      <van-icon name="arrow" />
      <van-icon name="star-o" />
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { usePlayerStore } from '../stores/player'
import { storeToRefs } from 'pinia'

const router = useRouter()
const goBack = () => router.back()
const playerStore = usePlayerStore()
const { isPlaying, currentSong, progress, currentTime, duration, isLoading } = storeToRefs(playerStore)

// 时间格式化函数
const formatTime = (seconds) => {
  if (!seconds || isNaN(seconds)) return '00:00'
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

const playStatus = () => {
  if (!isLoading.value) {
    playerStore.toggle()
  }
}
const onSliderChange = (val) => {
  playerStore.setProgress(val)
}
</script>

<style scoped>
.player-detail {
  background: #181818;
  min-height: 100vh;
  color: #fff;
  padding-bottom: 32px;
}
.van-nav-bar {
  background: transparent;
}
.player-vinyl {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.vinyl-wrapper {
  position: relative;
  width: 260px;
  height: 260px;
}
.vinyl-img {
  width: 100%;
  border-radius: 50%;
  filter: brightness(0.7);
  animation: rotate 2s linear infinite;
  animation-play-state: paused;
}
.vinyl-img.playing {
  animation-play-state: running;
}
.album-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 6px solid #222;
}
.song-info {
  text-align: center;
  margin-top: 24px;
}
.song-title {
  font-size: 24px;
  font-weight: bold;
}
.song-artist {
  color: #ccc;
  margin: 8px 0;
}
.song-tags .van-tag {
  margin: 0 4px;
}
.song-desc {
  color: #aaa;
  margin-top: 8px;
}
.player-controls {
  display: flex;
  justify-content: space-around;
  margin: 24px 0 8px 0;
  color: #bbb;
}
.player-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 24px;
}
.player-progress span {
  font-size: 12px;
  color: #aaa;
}
.player-actions {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 24px;
  color: #fff;
}
.loading-icon {
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>